import React, { Component } from 'react'
import { Card, Statistic, DatePicker, Timeline, Col, Row } from 'antd'
import { QuestionCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, ReloadOutlined } from "@ant-design/icons"
import './home.less'
import Line from './line'
import Bar from './bar'
import dayjs from 'dayjs'

const dateFormat = 'YYYY/MM/DD'
const { RangePicker } = DatePicker
/**
 * 首页路由
 */
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isVisited: true
    }
  }
  handleChange = (isVisited) => {
    return () => this.setState({ isVisited })
  }

  render() {
    const { isVisited } = this.state
    const extra = (
      <QuestionCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
    )
    const title = (
      <span style={{ color: 'rgba(0,0,0,.45)' }}>商品总量</span>
    )
    return (
      <div className='home'>
        
        <Row gutter={16}>
          <Col span={6}>
            <Card className='home-card' title={title} extra={extra} style={{ width: 250 }}>
              <Statistic value={1128163} suffix="个" style={{ fontWeight: 'bolder' }}
              />
              <Statistic value={15} valueStyle={{ fontSize: 15 }} prefix={'周同比'}
                suffix={<div>%<ArrowDownOutlined style={{ color: 'red', marginLeft: 10 }} /></div>}
              />
              <Statistic value={10} valueStyle={{ fontSize: 15 }} prefix={'日同比'}
                suffix={<div>%<ArrowUpOutlined style={{ color: '#3f8600', marginLeft: 10 }} /></div>}
              />
            </Card>
          </Col>
          <Col span={18}>
            <Line />
          </Col>
        </Row>
        <Card>
          <Card className='home-content '
            title={<div className="home-menu">
              <span className={isVisited ? "home-menu-active home-menu-visited" : 'home-menu-visited'}
                onClick={this.handleChange(true)}>访问量</span>
              <span className={isVisited ? "" : 'home-menu-active'} onClick={this.handleChange(false)}>销售量</span>
            </div>}
            extra={ <RangePicker
              defaultValue={[dayjs('2019/01/01', dateFormat), dayjs('2025/01/01', dateFormat)]}
              format={dateFormat}
            />}>


            <Row gutter={16}>
              <Col span={16}>
                <Bar />
              </Col>
              <Col span={8}>
                <Card title='任务' extra={<ReloadOutlined />} className="home-table-right">
                  <Timeline
                    items={[
                      {
                        color: 'green',
                        children: '新版本迭代会',
                      },
                      {
                        color: 'green',
                        children: '完成网站设计初版',
                      },
                      {
                        color: 'red',
                        children: (
                          <>
                            <p>联调接口</p>
                            <p>功能验收</p>
                          </>
                        ),
                      },
                      {
                        children: (
                          <>
                            <p>登录功能设计</p>
                            <p>权限验证</p>
                            <p>页面排版</p>
                          </>
                        ),
                      },
                     
                    ]}
                    />
                </Card>
              </Col>
            </Row>
          </Card>
        </Card>
      </div>
    )
  }
}
